<template>
  <div class="container">
    <textarea
      class="suggest"
      v-model="content"
      placeholder="请留下您的宝贵意见或建议，我们将努力改进（不少于五个字）"
    ></textarea>
    <input
      class="phone"
      maxlength="11"
      v-model="phone"
      type="text"
      placeholder="请留下手机号码，以便我们回复您"
    >
    <p class="text">{{text}}</p>
    <div
      class="btn"
      @click="_doBeforeCheck"
    >提交</div>
  </div>
</template>

<script>
import {request} from '@/wxRequest/requestApi'

export default {
	data() {
		return {
			content: '', //内容
			phone: '', //手机号
			text: '', //提示
		}
	},
	methods: {
		/**
		 * 提交前验证
		 * @private
		 */
		_doBeforeCheck() {
			let check = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
			if (this.content.length <= 5) {
				this.text = '反馈内容不能为空哦，请再多描述一下吧~'
				return
			}

			if (this.phone === '') {
				this.text = '手机号码不能为空哦~'
				return
			}

			if (!check.test(this.phone)) {
				this.text = '请输入真实的手机号码，以便客服及时回复您的反馈。'
				return
			}
			this._sendSuggest()
		},
		/**
		 * 发送建议意见
		 * @private
		 */
		_sendSuggest() {
			let params = {
				url: '/AddSecOpinionsFeeback',
				method: 'POST',
				data: {
					moblie: this.phone,
					adviseContent: this.content,
					id: wx.getStorageSync('userId'),
				},
			}

			request(params).then(re => {
				if (re.status === 0) {
					wx.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 2000,
						success: () => {
							this.text = ''
							this.phone = ''
							this.content = ''
						},
					})
				} else {
					this.$Message.error(re.msg)
				}
			})
		},
	},
}
</script>

<style lang='scss' scoped>
.container {
	padding: 30rpx 20rpx 0;
	.suggest {
		display: block;
		width: 100%;
		height: 260rpx;
		padding: 20rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		resize: none;
		box-sizing: border-box;
		border: 1px solid #d3d1cc;
		-webkit-border-radius: 6rpx;
		-moz-border-radius: 6rpx;
		border-radius: 6rpx;
		background-color: #fff;
	}
	.phone {
		width: 100%;
		height: 88rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
		border: 2rpx solid #dddddd;
		padding-left: 20rpx;
		line-height: 88rpx;
		box-sizing: border-box;
		background-color: #fff;
		-webkit-border-radius: 6rpx;
		-moz-border-radius: 6rpx;
		border-radius: 6rpx;
	}
	.text {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: red;
	}
	.btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		margin-top: 60rpx;
		border: 2rpx solid #ffb000;
        background-color: #ffb000;
		box-sizing: border-box;
		text-align: center;
		font-size: 28rpx;
		color: #000;
		-webkit-border-radius: 88rpx;
		-moz-border-radius: 88rpx;
		border-radius: 88rpx;
	}
}
</style>
